<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/public.css" />
    <script src="/lib/layui/layui.all.js"></script>
    <style>
      form {
        font-size: 14px;
      }
      .layui-input {
        width: 380px;
      }
    </style>
  </head>
  <body>
    <form class="layui-card layui-form" action="">
      <div class="layui-card-header">修改密码</div>
      <div class="publicdiv">
        <div class="layui-form-item">
          <label class="layui-form-label">原密码</label>
          <div class="layui-input-inline">
            <input
              type="password"
              name="oldPwd"
              required
              lay-verify="required|len"
              placeholder="请输入原密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input
              type="password"
              name="newPwd"
              required
              lay-verify="required|len|diff"
              placeholder="请输入新密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认新密码</label>
          <div class="layui-input-inline">
            <input
              type="password"
              required
              lay-verify="required|len|same"
              placeholder="请确认新密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
              修改密码
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </div>
    </form>
    <script src="/lib/jquery.js"></script>
    <script src="/js/setAjax.js"></script>
    <script>
      let form = layui.form;
      form.verify({
        len: [/^\S{6,12}$/, "密码这么短,懒死你得了"],
        diff: function(val){
          if($("input[name=oldPwd]").val() === val){
            return "新密码不能和旧密码一样"
          }
        },
        same: function(val){
          if($("input[name=newPwd]").val() != val){
            return "两次密码不一致"
          }
        }
      });
      $("form").on("submit",function(e){
        e.preventDefault()
        $.ajax({
          type:"post",
          url:"/my/updatepwd",
          data:$("form").serialize(),
          success:function(res){
            if(res.status === 0){
            layer.msg(res.message)
              $("form")[0].reset()
            }else{
              layer.msg(res.message)
            }
          }
        })
      })
    </script>
  </body>
</html>
